<template>
<!-- 颜色规格选项 -->
  
  
    <div class="con">
     
        <!-- 展示 -->
      <h3 class="specs">{{detail.specsname}}</h3>
      <div class="option">
         <span :class="index==n?'active':''" @click="n=index" v-for="(item,index) in detail.specsattr" :key="item">{{item}}</span>
      </div>
    
      <van-button class="aa" round type="primary" color="pink" @click="addShop">加入购物车</van-button>
      
    </div>
 
</template>

<script>
// import axios from "axios"
import { catadd,Button,} from '../../../http/http'
export default {
    props:["detail"],
    data() {
        return {
            n:0
        }
    },
    methods: {
        addShop(){
        catadd({
            uid:JSON.parse(localStorage.getItem("userInfo")).uid,
            goodsid:this.detail.id,
            num:1
        }).then(res=>{
                if(res.data.code===200){
                    alert("添加成功")
                }else{
                    alert(res.data.msg)
                }
                this.$emit("hide")
            })
        }
        
    },
}
</script>
<style scoped>
.aa{
  float: right;
}
.specs{
    font-size: 0.5rem;
    font-weight: 900;
}
.option{
    overflow: hidden;
}
.option span{
    float: left;
    margin: 0.2rem;
    padding: 0.2rem 0.3rem;
    background: #ccc;
    border-radius: 0.1rem;
}
.option .active{
    background: pink;
    color: #fff;
}
</style>